<template>
  <ul class="footer">
    <li>
      <van-icon name="wap-home-o" />
      <div>首页</div>
    </li>
    <li>菜谱</li>
    <li>食材</li>
    <li>厨语</li>
    <li>视频</li>
  </ul>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {};
</script>

<style lang="scss" scoped>
.footer{
  position: fixed;
  bottom: 0;
}
ul {
  width: 100%;
  height: 49px;
  background-color: #ffffff;
  display: flex;
  line-height: 49px;
  border-top: 1px solid #d8d8d8;
}
li {
  width: 20%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>